#quickLinks.#{$namespace}quickLinksNav {
    padding: 0;
}
.#{$namespace}quickLinksNav__popup {
  @extend .view-all-sites-btn !optional;
  @include display-flex;
  @include align-items(center);
  height: 100%;

  .fa-external-link-square{
    @extend .all-sites-icon !optional;
    @media #{$phone}{
      display: inline-block;
    }
  }

  .quicklinks-label{
    @extend .all-sites-label !optional;
    @media #{$phone}{
      display: none;
    }
  }
}

#selectQuickLink {
  /* Re-use the Sites pop styles. */
  @extend #selectSite;
  @extend ul, .favoriteSiteList !optional;
}

#quickLinks{

  .#{$namespace}quickLinksNav__subnav{
    font-family: $header-font-family;
    font-weight: $header-font-weight;
    font-size: $default-font-size;
    color: var(--sakai-text-color-1);
    background-color: var(--tool-menu-background-color);
    box-shadow: var(--elevation-8dp);
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 99;
    padding: $standard-spacing;
    min-width: $quicklinks-menu-width;
    max-width: calc(#{$quicklinks-menu-width} * 2);
    &:after {
      bottom: 100%;
      left: 90%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: transparent;
      border-bottom-color: var(--tool-menu-background-color);
      border-width: 7px;
      margin-left: -7px;
      outline: 0;

      @media #{$phone} {
        left: initial;
        right: 71px;
      }
    }

    .tab-box{
      overflow-y:auto;
    }

    #quickLinks-header{
      @include display-flex;
      @include align-items(center);
      border: none;
      border-bottom: 1px solid var(--tool-border-color);
      padding: 0 0 $standard-spacing 0;
      margin: 0 0 $standard-spacing 0;
      background-color: var(--tool-menu-background-color);
      line-height: normal;

      .#{$namespace}quickLinks-header--info {
        padding-right: 1em;
      }
      #quickLinks-close {
        font-size: 1.5em;
        font-family: $header-font-family;
        color: var(--all-sites-close-action-color);
        padding: 0;
        margin-left: auto;
        &:hover {
          color: var(--all-sites-close-action-hover-color);
        }
      }
    }
    .tab-box {
      list-style: none;
      padding: 0;
      background-color: transparent;
      margin: 0;
    }

    .#{$namespace}quickLinksNav__submenuitem {
      display: block;
      border: 1px solid var(--tool-border-color);
      white-space: nowrap;
      overflow: hidden;
      padding: 0.3em 0.7em;
      list-style: none;
      background: var(--sakai-background-color-1);
      margin: 0.3em 0;
      a{
        @include display-flex;
        @include align-items(center);
        color: var(--sakai-text-color-1);
        font-family: $header-font-family;
        font-size: 0.9em;
        font-weight: $header-font-weight;
        padding: 0 0.5em 0 0;
        text-decoration: none;
        &.toolMenus{
          display: inline-block;
        }
      }
      &.is-selected{
        border: 1px solid var(--sakai-border-color);
      }

      #quicklink-icon{
        position: relative;
        display: inline-block;
        background-repeat: initial;
        background-position: center;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
      }

      .#{$namespace}quickLinks__submenuitem--title {
        &:hover {
          text-decoration: underline;
        }
        padding-left: 0.7em;
      }
    }
    @media #{$phone}{
      margin: 3.3em 0 0 -9.8em;
      position: fixed;
      top: 0.3em;
      right: 0;
      z-index: 61;
      min-width: initial;
      max-width: 100%;
    }
  }
}

.quicklinks-dropdown-overlay{
  @extend .user-dropdown-overlay !optional;
}
